<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import {
  Card,
  Descriptions,
  DescriptionsItem,
  Steps,
  Timeline,
  TimelineItem,
} from 'ant-design-vue';
</script>

<template>
  <Page>
    <div class="mt-4 flex flex-col gap-4 md:flex-row">
      <!-- 左侧：建立连接、发送消息 -->
      <Card :bordered="false" class="md:w-2/2 w-full">
        <template #title>
          <div class="flex items-center">
            <span class="ml-2 text-lg font-medium">部门信息</span>
          </div>
        </template>
        <div class="mb-2 flex items-center rounded-lg p-3">
          <div>
            <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
          </div>
          <span class="mr-2 text-xl font-medium">被访人姓名</span>
        </div>
        <Descriptions :column="2" :label-style="{ width: '38px' }">
          <DescriptionsItem label="被访人姓名"> 张三三 </DescriptionsItem>
          <DescriptionsItem label="头像">头像</DescriptionsItem>
          <DescriptionsItem label="性别">男</DescriptionsItem>
          <DescriptionsItem label="部门">‌设计部‌</DescriptionsItem>
          <DescriptionsItem label="岗位职称">UI设计师</DescriptionsItem>
          <DescriptionsItem label="办公地点">A座12楼</DescriptionsItem>
        </Descriptions>

        <div class="mb-2 flex items-center rounded-lg p-3">
          <div>
            <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
          </div>
          <span class="mr-4 text-xl font-medium">访客预约信息</span>
        </div>

        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="姓名">尼斯</DescriptionsItem>
          <DescriptionsItem label="联系方式">13888888888</DescriptionsItem>
          <DescriptionsItem label="身份证">650750281411067612</DescriptionsItem>
          <DescriptionsItem label="所属单位">
            摩西智能工业股份有限公司
          </DescriptionsItem>

          <DescriptionsItem label="预约时间">2023-01-01 10:00</DescriptionsItem>
          <DescriptionsItem label="时间段">2个小时</DescriptionsItem>
          <DescriptionsItem label="访客事由">开会</DescriptionsItem>
        </Descriptions>

        <div class="mb-2 flex items-center rounded-lg p-3">
          <div>
            <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
          </div>
          <span class="mr-4 text-xl font-medium">合同:</span>
        </div>

        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="审批状态">审批中</DescriptionsItem>
          <DescriptionsItem label="当前审批人">张三三</DescriptionsItem>
          <DescriptionsItem label="审核流程" span="{2}">
            <Steps
              :current="2"
              size="small"
              :items="[
                {
                  title: '张三三',
                  description: '部门总监',
                },
                {
                  title: '李四',
                  description: '部门经理',
                },
              ]"
            />
          </DescriptionsItem>
          <DescriptionsItem label="记录" span="{2}">
            <Timeline>
              <TimelineItem>Create a services site 2015-09-01</TimelineItem>
              <TimelineItem>
                Solve initial network problems 2015-09-01
              </TimelineItem>
              <TimelineItem>Technical testing 2015-09-01</TimelineItem>
              <TimelineItem>
                Network problems being solved 2015-09-01
              </TimelineItem>
            </Timeline>
          </DescriptionsItem>
          <DescriptionsItem label="抄送人">张三</DescriptionsItem>
        </Descriptions>
      </Card>
    </div>
  </Page>
</template>
